<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>dijit.form.Select test</title>

		<style>
			@import url(../../themes/claro/document.css);
			@import url(../../themes/claro/claro.css);
			@import url(../css/dijitTests.css);
			.ark { text-decoration: underline; }
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
	
		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, parseOnLoad: true"></script>
	
		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript" src="../helpers.js"></script>

		<script type="text/javascript">
			dojo.require("doh.runner");
			dojo.require("dojo.parser");
			dojo.require("dijit.form.Select");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Form");
			dojo.require("dojo.data.ItemFileWriteStore");

			var numOptions = 0;
			var numChanges = 0;
			var addNum = 10;

			// Add test=true to the URL to run unit tests.
			// Add testPerformance=true to the URL to run performance tests - note SLOW to run
			var test = /mode=test/i.test(window.location.href),
				testPerformance = /mode=benchmark/i.test(window.location.href);

			// Data and stores here for store-based selects
			var data = {
				identifier: "value",
				label: "label",
				items: [
					{value: "AL", label: "Alabama"},
					{value: "AK", label: "Alaska"},
					{value: "AZ", label: "Arizona"},
					{value: "AR", label: "Arkansas"},
					{value: "CA", label: "California"},
					{value: "CO", label: "Colorado"},
					{value: "CT", label: "Connecticut"}
				]
			};
			var data2 = {
				identifier: "value",
				label: "label",
				items: [
					{value: "DE", label: "Delaware"},
					{value: "FL", label: "Florida"},
					{value: "GA", label: "Georgia"},
					{value: "HI", label: "Hawaii"},
					{value: "ID", label: "Idaho"},
					{value: "IL", label: "Illinois"},
					{value: "IN", label: "Indiana"}
				]
			};

			var readStore = new dojo.data.ItemFileReadStore({data:dojo.clone(data)});
			var store2 = new dojo.data.ItemFileReadStore({data:dojo.clone(data2)});
			var writeStore = new dojo.data.ItemFileWriteStore({data:dojo.clone(data)});

			function wrapLabel(expected){
				return ("<span class=\"dijitReset dijitInline dijitSelectLabel\">" + expected + "</span>").toLowerCase().replace(/ */g, "");
			}

			dojo.addOnLoad(function(){
				dojo.connect(s1, "onChange", function(val){
					console.log("First Select Changed to " + val);
					numChanges++;
				});

				var programmatic = new dijit.form.Select({
					options: [
						{ label: 'foo', value: 'foo', selected: true },
						{ label: 'bar', value: 'bar' }
					]
				});
				programmatic.placeAt('testProgramatic');

				var programmaticDisabled = new dijit.form.Select({
					disabled: true,
					options: [
						{ label: 'foo', value: 'foo', selected: true },
						{ label: 'bar', value: 'bar' }
					]
				});
				programmaticDisabled.placeAt('testProgramatic');

				if(test){
					doh.register("API", [
						{
							name: "test_set",
							timeout: 5000,
							runTest: function(t){
								var d = new doh.Deferred();
								t.is("VA", form.get("value").s1, "initial value");
								s1.set("value", "WA"); // set s1 to a valid value
								t.is("WA", s1.value);

								setTimeout(function(){ try{ // allow onChange to fire

									// set s1 to non-existing value, which (currently) makes the Select pick
									// the first option in the drop down
									s1.set("value", "UT");
									t.is("TN", s1.value);

									setTimeout(function(){ try{ // allow onChange to fire
										t.is(2, numChanges);
										
										// prevent onChange from firing
										s1.set("value", "FL", false);
										
										setTimeout(function(){ try{ // allow onChange to fire if it's wrong
											t.is(2, numChanges);
											d.callback(true);
										}catch(e){ d.errback(e); }}, 0)
									}catch(e){ d.errback(e); }}, 0);
								}catch(e){ d.errback(e); }}, 0);
								return d;
							}
						},
						{
							name: 'test_disabled',
							runTest: function(t){
								t.is(testDisabled.disabled, true);
							}
						},
						{
							name: 'test_programmatic',
							runTest: function(t){
								t.is(programmatic.options.length, 2);
								t.is(programmaticDisabled.options.length, 2);
								t.is(programmaticDisabled.disabled, true);
							}
						},

						// Test that destroying a Select destroys the internal Menu and MenuItems too
						{
							name: "test_destroy",
							timeout: 5000,
							runTest: function(t){
								var oldCnt = dijit.registry.length;
									
								s1.destroy();

								var newCnt = dijit.registry.length;
								t.t(newCnt < oldCnt + 3, "should have destroyed many widgets, went from " + oldCnt + " to " + newCnt);
							}
						}
					]);

					doh.register("data store", [
						// Tests that when the currently selected item is changed in the data store,
						// the change is reflected in the Select widget
						function test_changeSelected(t){
							t.is("AL", s11.value);
							t.is(wrapLabel("Alabama"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""));
							s11.set("value", "AK");
							t.is("AK", s11.value);
							t.is(wrapLabel("Alaska"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""));
							var d = new doh.Deferred();
							writeStore.fetchItemByIdentity({
								identity: "AK",
								onItem: d.getTestCallback(function(item){
									writeStore.setValue(item, "label", "North Pole");
									t.is(wrapLabel("North Pole"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""), "select displayed value updated");
								})
							});
							return d;
						},

						// Test that a delete of the non-selected item will remove that item from the Select's
						// list of options.
						function test_deleteNonSelected(t){
							t.is(7, s11.getOptions().length);
							t.is("AK", s11.value);
							var d = new doh.Deferred();
							writeStore.fetchItemByIdentity({
								identity: "AZ",
								onItem: d.getTestCallback(function(item){
									writeStore.deleteItem(item);
									t.is(6, s11.getOptions().length);
								})
							});
							return d;
						},

						// Test that a delete of the selected item will remove that item from the Select's
						// list of options, and switch to a new selected item
						function test_deleteSelected(t){
							t.is(6, s11.getOptions().length);
							t.is("AK", s11.value);
							var d = new doh.Deferred();
							writeStore.fetchItemByIdentity({
								identity: "AK",
								onItem: d.getTestCallback(function(item){
									writeStore.deleteItem(item);
									t.is("AL", s11.value);
									t.is(5, s11.getOptions().length);
								})
							});
							return d;
						},

						// Test that new items added to the data store appear in the select's options
						function test_newItem(t){
							t.is(5, s11.getOptions().length);
							t.is("AL", s11.value);	

							var d = new doh.Deferred();
							writeStore.newItem({value: "NY", label: "New York"});
							setTimeout(d.getTestCallback(function(){
									t.is(6, s11.getOptions().length);
									s11.set("value", "NY");
									t.is("NY", s11.value);
							}), 100);

							return d;
						},

						// Test that a Select's store can be changed
						// TODO: should be supported/tested through set("store", ...), although
						// I guess that wouldn't allow setting the selected item at the same time.
						function test_setStore(t){
							t.is("AL", s12.value);
							s12.setStore(store2, "FL");
							t.is("FL", s12.value);
							s12.setStore(readStore, "CA");
							t.is("CA", s12.value);
							s12.setStore(store2);
							t.is("DE", s12.value);
							t.is(7, s12.getOptions().length);
						}
					]);
				}

				if(testPerformance){			
					doh.register("performance", [
						{
							name: "test_performance_single",
							testType: "perf",
							trialDuration: 100,
							trialIterations: 100,
							trialDelay: 100,
							runTest: function(t){
								var opt = {value: "Test", label: "Test Option"};
								s6.addOption(opt);
								s6.removeOption(opt);
							}
						},
						{
							name: "test_performance_separate",
							testType: "perf",
							trialDuration: 100,
							trialIterations: 100,
							trialDelay: 100,
							setUp: function(t){
								var opts = (t.options = []);
								for(var i = 0; i < addNum; i++){
									opts.push({value: i + "", label: "Option " + (i + 1)});
								}
							},
							runTest: function(t){
								dojo.forEach(t.options, function(opt){
									s6.addOption(opt);
								});
								dojo.forEach(t.options, function(opt){
									s6.removeOption(opt);
								});
							},
							tearDown: function(t){
								delete t.options;
							}
						},
						{
							name: "test_performance_batch",
							testType: "perf",
							trialDuration: 100,
							trialIterations: 100,
							trialDelay: 100,
							setUp: function(t){
								var opts = (t.options = []);
								for(var i = 0; i < addNum; i++){
									opts.push({value: i + "", label: "Option " + (i + 1)});
								}
							},
							runTest: function(t){
								s6.addOption(t.options);
								s6.removeOption(t.options);
							},
							tearDown: function(t){
								delete t.options;
							}
						}
					]);
				}

				if(test || testPerformance){
					doh.run();
				}
			});
		</script>
	</head>
	<body class="claro">
		<h1 class="testTitle">Test: dijit.form.Select</h1>

		<p>
			Note: load <a href="test_Select.html?mode=test">test_Select.html?mode=test</a> to run unit tests, or
			<a href="test_Select.html?mode=benchmark">test_Select.html?mode=benchmark</a> to run performance tests.
		</p>

		<h2>HTML select for comparison</h2>
		<form method="get" id="htmlForm" action="get">
			<label for="htmlSelect">Four options:</label>
			<select id="htmlSelect">
				<option value="one">one</option>
				<option value="two">two</option>
				<option value="three">three</option>
				<option value="four">four</option>
			</select>
			<label for="htmlSelect2">Empty:</label>
			<select id="htmlSelect2">
			</select>
		</form>
		<h2>dijit.form.Select</h2>
		<form data-dojo-id="form" data-dojo-type="dijit.form.Form" data-dojo-props='method:"get"'>
			<h4 class="testSubtitle">Setting Defaults</h4>
			<label for="s1">Test One: </label>
			<select id="s1" data-dojo-id="s1" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s1" '>
				<option value="TN">Tennessee</option>
				<option value="VA" selected="selected">Virginia</option>
				<option value="WA">Washington</option>
				<option value="FL">Florida</option>
				<option value="CA">California</option>
			</select>
			<button id="s1button" data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ console.log(s1.get("displayedValue")); }'>
				Get Displayed Value
			</button>
			<label for="s2">Test Two: </label>
			<select id="s2" data-dojo-id="s2" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s2", value:"CA" '>
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option value="CA">California</option>
			</select>
			<label for="s3">Test Three: </label>
			<select id="s3" data-dojo-id="s3" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s3", style:{width:"150px"},
					required:true,
					onChange: function(){
						if(!this.options[0].value){
							this.removeOption(0);
						}
					}
				'>
				<option>&nbsp;</option>
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option></option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option></option>
				<option value="CA">California</option>
			</select>
		<hr>
			<h4 class="testSubtitle">Rich Text (Need to use divs and spans - since browsers hack selects to pieces)</h4>
			<label>Rich text One: 
			<span id="s4" data-dojo-id="s4" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s4", value:"AK" '>
				<span data-dojo-value="AL"><b>Alabama</b></span>
				<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a</span></span>
				<span data-dojo-value="AZ"><i>Arizona</i></span>
				<span data-dojo-value="AR"><span class="ark">Arkansas</span></span>
				<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a</span></span>
				<button value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</button>
			</span></label>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ s4.set("disabled", !s4.get("disabled")); }'>
				Toggle Disabled
			</button>
			<label>Rich text two: 
			<span id="s5" data-dojo-id="s5" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s5", value:"move" '>
				<span data-dojo-value="copy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndCopy.png" /> Copy</span>
				<span data-dojo-value="move"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndMove.png" /> Move</span>
				<span data-dojo-value="nocopy"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoCopy.png" /> No Copy</span>
				<span data-dojo-value="nomove"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" /> No Move</span>
				<span data-dojo-value="long"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" /> Very Long Menu Entry</span>
			</span></label>
		<hr>
			<h4 class="testSubtitle"><label for="s6">Initially Empty</label></h4>
			<select id="s6" data-dojo-id="s6" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s6", maxHeight:100 '>
			</select>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ numOptions++; s6.addOption({value: numOptions + "", label: "Option " + numOptions}); }'>
				Add Option
			</button>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ s6.removeOption(0); }'>
				Remove Top Option
			</button>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ s6.set("disabled", !s6.get("disabled")); }'>
				Toggle Disabled
			</button>
			<hr>
		<h4 class="testSubtitle"><label for="s7">Single Item</label></h4>
			<select id="s7" data-dojo-id="s7" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s7" '>
				<option value="NY">New York</option>
			</select>
		<hr>
		<h4 class="testSubtitle">Long lists</h4>
			<label for="s8a">maxHeight=200:</label>
			<select id="s8a" data-dojo-id="s8a" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s8a", maxHeight:200 '>
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Connecticut</option>
				<option value="DE">Delaware</option>
				<option value="DC">Dist of Columbia</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="HI">Hawaii</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="IA">Iowa</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="ME">Maine</option>
				<option value="MD">Maryland</option>
				<option value="MA">Massachusetts</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MS">Mississippi</option>
				<option value="MO">Missouri</option>
				<option value="MT">Montana</option>
				<option value="NE">Nebraska</option>
				<option value="NV">Nevada</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NY">New York</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VT">Vermont</option>
				<option value="VA">Virginia</option>
				<option value="WA">Washington</option>
				<option value="WV">West Virginia</option>
				<option value="WI">Wisconsin</option>
				<option value="WY">Wyoming</option>
			</select>
			<label for="s8b">no maxHeight:</label>
			<select id="s8b" data-dojo-id="s8b" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s8b" '>
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Connecticut</option>
				<option value="DE">Delaware</option>
				<option value="DC">Dist of Columbia</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="HI">Hawaii</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="IA">Iowa</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="ME">Maine</option>
				<option value="MD">Maryland</option>
				<option value="MA">Massachusetts</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MS">Mississippi</option>
				<option value="MO">Missouri</option>
				<option value="MT">Montana</option>
				<option value="NE">Nebraska</option>
				<option value="NV">Nevada</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NY">New York</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VT">Vermont</option>
				<option value="VA">Virginia</option>
				<option value="WA">Washington</option>
				<option value="WV">West Virginia</option>
				<option value="WI">Wisconsin</option>
				<option value="WY">Wyoming</option>
			</select>
			<hr>
			<h4 class="testSubtitle">Store-based</h4>
			<label for="s9">Example 1</label>
			<select id="s9" data-dojo-id="s9" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s9", store:readStore, value:"CT" '>
			</select>
			<label for="s10">Example 2</label>
			<select id="s10" data-dojo-id="s10" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s10", store:readStore '>
			</select>
			<label for="s11">Example 3</label>
			<select id="s11" data-dojo-id="s11" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s11", store:writeStore '>
			</select>
			<label for="s12">Example 4</label>
			<select id="s12" data-dojo-id="s12" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s12", store:readStore '>
			</select>
			<hr>
			<h4 class="testSubtitle">Inlined with text (all IE modes except for IE8 Standards)</h4>
			<label for="txtPrompt">Text Prompt:</label>
			<select id="txtPrompt" data-dojo-type="dijit.form.Select" >
				<option value="SEL" selected="selected">Select</option>
				<option value="OTHER">Other</option>
			</select>
			<hr>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ console.dir(form.getValues()); }'>
				Get Values
			</button>
			<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit"'>Submit</button>
		</form>
		<hr>
		<h4 class="testSubtitle">Disabled</h4>
		<label for="testDisabled">Disabled:</label>
		<select id='testDisabled' data-dojo-id='testDisabled' data-dojo-type="dijit.form.Select" data-dojo-props='disabled:true, name:"testDisabled" '>
			<option value="foo">foo</option>
			<option value="bar">bar</option>
		</select>
		<hr>
		<h4 class="testSubtitle">Programmatic and other tests</h4>
		<div id="testProgramatic"></div>
	</body>
</html>
